<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>Chinese bullfrog = {{message}}</h1>
  <h1>totalPrice = {{totalPrice}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  //let(变量)和const(常量)
  const app = new Vue({
    el: '#app',
    data: {
      message: '中国牛蛙！'
    },
    computed: {
      totalPrice() {
        //首先，这里我们来设定一个环境，以便我们来学习三个高阶函数的使用。
        //那就是对数组 arr=[10,12,5,2,7,20]进行一个过滤和倍增和总和。
        const arr = [10, 12, 5, 2, 7, 20];
        //假如不使用高阶函数的时候，我们据可以这样写。
        // //将小于10的数字筛选出来
        // console.log(arr);
        //
        // let newArr = [];
        // for (let i = 0; i < arr.length; i++) {
        //   if (arr[i] < 10) {
        //     newArr.push(arr[i]);
        //   }
        // }
        // console.log(newArr);
        //
        // //将筛选出来的数字进行倍增
        // for (let j = 0; j < newArr.length; j++) {
        //   newArr.splice(j, 1, newArr[j] * 2);
        // }
        // console.log(newArr);
        //
        // let totalPrice = 0;
        // for (let x = 0; x < newArr.length; x++) {
        //   totalPrice += newArr[x];
        // }

        //上面是不使用高阶函数的时候，下面我们用高阶函数同样能够实现效果并且效率翻倍。
        //显而易见，利用高阶函数，我们的代码就更加简便了，阅读起来也非常赏心悦目。
        // const arr1 = [10, 12, 5, 2, 7, 20];
        // let newArr = arr.filter(function (n) {
        //   return n < 10;
        // })
        // console.log(newArr);
        //
        // let new1Arr = newArr.map(function (n) {
        //   return n * 2;
        // })
        // console.log(newArr);
        //
        // let totalPrice = 0;
        // new1Arr.reduce(function (preValue, n) {
        //   return totalPrice = (preValue + n);
        //   //0 10 10
        //   //10 4 14
        //   //14 14 28
        // }, 0)
        // console.log(newArr);
        // return totalPrice;

        //在高阶函数的基础上，我们还可以简写
        // const arr2 = [10, 12, 5, 2, 7, 20];
        // let totalPrice = 0;
        // totalPrice = arr2.filter(function (n) {
        //   return n < 10;
        // }).map(function (n) {
        //   return n * 2;
        // }).reduce(function (preValue, n) {
        //   return totalPrice = preValue + n;
        // }, 0)
        // return totalPrice;

        //除此之外，我们还有更加简便的写法，这里利用到了箭头函数。
        const arr3 = [10, 12, 6, 2, 7, 20];
        let totalPrice = 0;
        //在这里，preValue的值虽然没有写出来，但是默认为零。
        totalPrice = arr3.filter(n => n < 10).map(n => n * 2).reduce((preValue, n) => preValue + n);
        return totalPrice;

      }
    }
  })
</script>
</body>
</html>